<template>
  <div class="detaildata">
    <el-tabs v-model="activeName" @tab-click="handleClick" class="first-tabs">
      <el-tab-pane label="分析" name="first">
        <div class="general">
          <div class="topger" style="display: flex; align-items: center">
            <i class="el-icon-document"></i>
            <p>概括</p>
          </div>
          <div class="biaoge" style="margin-top: 15px">
            <!-- <el-table  :data="tableData1" height="193" border style="width: 100%;" class="custom-table">
              <el-table-column prop="date" width="210">
                <template #default="">

                  <p class="p1">昨日收益</p>
                </template>   
              </el-table-column>
              <el-table-column prop="name" width="210">
              </el-table-column>
              <el-table-column prop="address" width="210">
              </el-table-column>
              <el-table-column prop="" width="210">
              </el-table-column>
            </el-table> -->
            <!--  <div class="table">
              <div v-for="row in 4" :key="row" class="table-row">
                <div v-for="col in 4" :key="col" class="table-cell">
                  <span class="left-data">{{ getData(row, col).left }}</span>
                  <span class="right-data">{{ getData(row, col).right }}</span>
                </div>
              </div>
            </div> -->

            <el-table
              :data="tableData"
              border
              style="width: 100%"
              :show-header="false"
            >
              <el-table-column prop="data" label="" width="210">
                <template slot-scope="scope">
                  <div class="cell-content">
                    <span class="left-data">{{
                      scope.row.column1LeftData
                    }}</span>
                    <span class="right-data">{{
                      scope.row.column1RightData
                    }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="" width="210">
                <template slot-scope="scope">
                  <div class="cell-content">
                    <span class="left-data">{{
                      scope.row.column2LeftData
                    }}</span>
                    <span class="right-data">{{
                      scope.row.column2RightData
                    }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="three" label="" width="210">
                <template slot-scope="scope">
                  <div class="cell-content">
                    <span class="left-data">{{
                      scope.row.column3LeftData
                    }}</span>
                    <span class="right-data">{{
                      scope.row.column3RightData
                    }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="four" label="">
                <template slot-scope="scope">
                  <div class="cell-content">
                    <span class="left-data">{{
                      scope.row.column4LeftData
                    }}</span>
                    <span class="right-data">{{
                      scope.row.column4RightData
                    }}</span>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <div
          class="topger"
          style="display: flex; align-items: center; margin-bottom: 10px"
        >
          <i class="el-icon-document"></i>
          <p>热门品种</p>
        </div>

        <div class="shouyi">
          <p>收益</p>
          <el-tabs
            type="border-card"
            v-model="activeTab1"
            @tab-click="earningHandleTabClick"
            class="second-tabs"
          >
            <el-tab-pane label="近一月" name="tab1">
              <!-- <div class="chart1" ref="chart1"></div> -->
            </el-tab-pane>
            <el-tab-pane label="近三月" name="tab2"> </el-tab-pane>
            <el-tab-pane label="近一年" name="tab3"></el-tab-pane>
            <el-tab-pane label="不限" name="tab4"></el-tab-pane>
            <!-- chart写在外面切换数据 -->
            <div class="chart1" ref="chart1"></div>
          </el-tabs>
        </div>
        <div class="yue">
          <p>余额</p>
          <el-tabs
            type="border-card"
            v-model="activeTab2"
            @tab-click="balanceHandleTabClick"
            class="second-tabs"
          >
            <el-tab-pane label="近一月" name="tab1"></el-tab-pane>
            <el-tab-pane label="近三月" name="tab2"></el-tab-pane>
            <el-tab-pane label="近一年" name="tab3"></el-tab-pane>
            <el-tab-pane label="不限" name="tab4"></el-tab-pane>
            <!-- chart写在外面切换数据 -->
            <div class="chart2" ref="chart2"></div>
          </el-tabs>
        </div>
        <div class="shoushu">
          <p>手数</p>
          <el-tabs
            type="border-card"
            v-model="activeTab3"
            @tab-click="numhandsHandleTabClick"
            class="second-tabs"
          >
            <el-tab-pane label="近一月" name="tab1"></el-tab-pane>
            <el-tab-pane label="近三月" name="tab2"></el-tab-pane>
            <el-tab-pane label="近一年" name="tab3"></el-tab-pane>
            <el-tab-pane label="不限" name="tab4"></el-tab-pane>
            <!-- chart写在外面切换数据 -->
            <div class="chart3" ref="chart3"></div>
          </el-tabs>
        </div>
      </el-tab-pane>
      <el-tab-pane label="订单" name="second">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="pingzhong" label="品种" width="80">
          </el-table-column>
          <el-table-column prop="leibie" label="类别" width="80">
          </el-table-column>
          <el-table-column prop="shoushu" label="手数" width="80">
          </el-table-column>
          <el-table-column prop="opentime" label="开仓时间" width="100">
          </el-table-column>
          <el-table-column prop="pingtime" label="平仓时间" width="100">
          </el-table-column>
          <el-table-column prop="price" label="价格" width="80">
          </el-table-column>
          <el-table-column prop="interst" label="隔夜利息" width="80">
          </el-table-column>
          <el-table-column prop="fee" label="手续费" width="80">
          </el-table-column>
          <el-table-column prop="earn" label="获利" width="80">
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import { starDetailApi, pcstarWaveApi } from '@/api/index'
export default {
  props: {
    selectedId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      starInfo: {},
      // pc明星波形图
      option1Data: {
        date: [],
        price: [],
        price_name: '总收益',
        oneself: [],
        oneself_name: '当日自主收益'
      },
      option2Data: {
        date: [],
        price: [],
        price_name: '余额',
        exit: [],
        exit_name: '出金',
        enter: [],
        enter_name: '入金'
      },
      option3Data: {
        date: [],
        price: [],
        price_name: '手术数'
      },
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      chart1: null,
      chart2: null,
      chart3: null,
      activeName: 'first',
      activeNames: ['1'],
      activeTab1: 'tab1',
      activeTab2: 'tab1',
      activeTab3: 'tab1',
      /*   tableData: [{
        date: { left: '昨日收益', right: '43557.2' },
        name: { left: '余额', right: "75566.44" },
        three: { left: '净值', right: "75566.44" },
        four: { left: '获利', right: "75566.44" }
      }] */
      tableData: [
        {
          column1LeftData: ' Left 1',
          column1RightData: ' Right 1',
          column2LeftData: 'Left 1',
          column2RightData: 'Right 1',
          column3LeftData: 'Left 1',
          column3RightData: 'Right 1',
          column4LeftData: 'Left 1',
          column4RightData: 'Right 1'
        },
        {
          column1LeftData: ' Left 1',
          column1RightData: ' Right 1',
          column2LeftData: 'Left 1',
          column2RightData: 'Right 1',
          column3LeftData: 'Left 1',
          column3RightData: 'Right 1',
          column4LeftData: 'Left 1',
          column4RightData: 'Right 1'
        },
        {
          column1LeftData: ' Left 1',
          column1RightData: ' Right 1',
          column2LeftData: 'Left 1',
          column2RightData: 'Right 1',
          column3LeftData: 'Left 1',
          column3RightData: 'Right 1',
          column4LeftData: 'Left 1',
          column4RightData: 'Right 1'
        },
        {
          column1LeftData: ' Left 1',
          column1RightData: ' Right 1',
          column2LeftData: 'Left 1',
          column2RightData: 'Right 1',
          column3LeftData: 'Left 1',
          column3RightData: 'Right 1',
          column4LeftData: 'Left 1',
          column4RightData: 'Right 1'
        }
      ]
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    handleChange(val) {
      console.log(val)
    },
    // 调用pc接口获取收益数据
    getAarningData(item) {
      this.option1Data = {
        date: [],
        price: [],
        price_name: '总收益',
        oneself: [],
        oneself_name: '当日自主收益'
      }
      pcstarWaveApi({ id: '1', type: item, select_type: '0' }).then((res) => {
        res.data.data.forEach((item) => {
          this.option1Data.date.push(item.date)
          this.option1Data.price.push(item.price)
          this.option1Data.oneself.push(item.oneself)
        })
        this.initLineChart1()
      })
    },
    // 渲染收益折线图
    initLineChart1() {
      const chart1 = echarts.init(this.$refs.chart1)
      const option1 = {
        grid: {
          containLabel: true,
          left: 20,
          right: 40,
          top: 40,
          bottom: 20
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          // 日期
          data: this.option1Data.date,
          show: true
        },
        legend: {
          data: ['总收益', '当日自主收益'],
          bottom: '0'
        },
        yAxis: {
          type: 'value',
          show: true
        },
        tooltip: {
          // show: true,
          trigger: 'axis'
          // triggerOn: 'mousemove',
          // valueFormatter: (value) => '总收益' + value
        },
        series: [
          {
            name: '总收益',
            // 数据
            data: this.option1Data.price,
            type: 'line',
            showSymbol: false,
            smooth: true,
            itemStyle: {
              color: '#21cca2'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(55, 225, 150,0.5)' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(55, 225, 150,0)' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          },
          {
            name: '当日自主收益',
            // 这个是数据
            data: this.option1Data.oneself,
            type: 'line',
            showSymbol: false,
            smooth: true,
            itemStyle: {
              color: 'rgb(145, 204, 117)'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(145, 204, 117,0.5)' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(145, 204, 117,0)' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          }
        ]
      }
      chart1.setOption(option1)
      this.chart1 = chart1
    },
    // 收益tab切换
    earningHandleTabClick(tab) {
      this.activeTab1 = tab.name
      this.getAarningData(tab.index)
    },
    // 调用pc接口获取余额数据
    getBalanceData(item) {
      this.option2Data = {
        date: [],
        price: [],
        price_name: '余额',
        exit: [],
        exit_name: '出金',
        enter: [],
        enter_name: '入金'
      },
      pcstarWaveApi({ id: '1', type: item, select_type: '1' }).then((res) => {
        res.data.data.forEach((item) => {
          this.option2Data.date.push(item.date)
          this.option2Data.price.push(item.price)
          this.option2Data.exit.push(item.exit)
          this.option2Data.enter.push(item.enter)
        })
        console.log(this.option2Data)
        this.initLineChart2()
      })
    },
    // 渲染余额折线图
    initLineChart2() {
      const chart2 = echarts.init(this.$refs.chart2)
      const option2 = {
        grid: {
          containLabel: true,
          left: 20,
          right: 40,
          top: 40,
          bottom: 20
        },
        legend: {
          data: ['余额', '出金', '入金'],
          bottom: '0%'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.option2Data.date,
          show: true
        },
        yAxis: {
          type: 'value',
          show: true
        },
        tooltip: {
          trigger: 'axis'
        },
        series: [
          {
            name: '余额',
            // 数据
            data: this.option2Data.price,
            type: 'line',
            showSymbol: false,
            smooth: true,
            itemStyle: {
              color: 'rgb(32, 187, 149)'
            }
          },
          {
            name: '出金',
            // 数据
            data: this.option2Data.exit,
            type: 'line',
            showSymbol: false,
            smooth: true,
            itemStyle: {
              color: 'rgb(255, 0, 0)'
            }
          },
          {
            name: '入金',
            // 数据
            data: this.option2Data.enter,
            type: 'line',
            showSymbol: false,
            smooth: true,
            itemStyle: {
              color: 'rgb(32, 187, 149)'
            }
          }
        ]
      }
      chart2.setOption(option2)
      this.chart2 = chart2
    },
    // 余额tab切换
    balanceHandleTabClick(tab) {
      this.activeTab2 = tab.name
      this.getBalanceData(tab.index)
    },
    // 调用pc接口获取手数数据
    getNumhandsData(item) {
      this.option3Data = {
        date: [],
        price: [],
        price_name: '手术数'
      },
      pcstarWaveApi({ id: '1', type: item, select_type: '2' }).then((res) => {
        res.data.data.forEach((item) => {
          this.option3Data.date.push(item.date)
          this.option3Data.price.push(item.price)
        })
        console.log(this.option3Data)
        this.initLineChart3()
      })
    },
    // 渲染手数柱状图
    initLineChart3() {
      const chart3 = echarts.init(this.$refs.chart3)
      const option3 = {
        legend: {
          data: [this.option3Data.price_name]
        },
        tooltip: {},
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: this.option3Data.date
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: this.option3Data.price_name,
            type: 'bar',
            barGap: 0,
            // label: labelOption,
            emphasis: {
              focus: 'series'
            },
            color: 'rgb(248, 125, 3)',
            data: this.option3Data.price
          }
        ]
      }
      chart3.setOption(option3)
      this.chart3 = chart3
    },
    // 手数tab切换
    numhandsHandleTabClick(tab) {
      this.activeTab3 = tab.name
      this.getNumhandsData(tab.index)
    }
    /*  getStarInfo(id){
      console.log(id)
      starDetailApi({id:id}).then(res=>{
        this.starInfo=res.data.data
        console.log(this.starInfo,"详细信息>>>>>")
      })
    } */
  },
  mounted() {
    this.getAarningData('0')
    this.getBalanceData('0')
    this.getNumhandsData('0')
    // this.getPcStar(0)
    // this.getStarInfo()
  }
}
</script>

<style scoped lang="scss">
.cell-content {
  height: 25px;
  display: flex;
  justify-content: space-between;
}

.left-data {
  margin-right: 10px;
}

.right-data {
  margin-left: 10px;
}

.table {
  display: flex;
  flex-direction: column;
}

.table-row {
  display: flex;
}

.table-cell {
  flex: 1;
  border: 1px solid rgba($color: gray, $alpha: 0.2);
  height: 45px;
  padding: 10px;
}

.left-data {
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
}

.right-data {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
}

.chart1 {
  height: 300px;
  width: 850px;
  background-color: white;
}

.chart2 {
  height: 300px;
  width: 850px;
  background-color: white;
}

.chart3 {
  height: 300px;
  width: 850px;
  background-color: white;
}

.detaildata {
  width: 900px;
  min-height: 700px;
  background-color: white;
  //margin-top: 20px;
  margin-left: 5px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  box-sizing: border-box;

  .general {
    width: 100%;
    height: 270px;

    .biaoge {
    }

    // background-color: aqua;
    .topger {
      border-bottom: 1px solid rgba($color: gray, $alpha: 0.1);

      i {
        padding-left: 20px;
        padding-right: 5px;
      }

      p {
        text-align: left;
        width: 100%;
        height: 40px;
        line-height: 40px;

        background-color: #fafafa;
        //border-bottom: 1px solid rgba($color: gray, $alpha: 0.1);
      }
    }
  }

  .shouyi {
    width: 100%;
    height: 360px;

    p {
      text-align: left;
      width: 100%;
      height: 30px;
      line-height: 30px;
      padding-left: 20px;
      background-color: rgba($color: gray, $alpha: 0.1);
      border-bottom: 1px solid gray;
    }
  }

  .yue {
    width: 100%;
    height: 350px;

    p {
      text-align: left;
      width: 100%;
      height: 30px;
      line-height: 30px;
      padding-left: 20px;
      background-color: rgba($color: gray, $alpha: 0.1);
      border-bottom: 1px solid gray;
    }
  }

  .shoushu {
    width: 100%;
    height: 350px;

    p {
      text-align: left;
      width: 100%;
      height: 30px;
      line-height: 30px;
      padding-left: 20px;
      background-color: rgba($color: gray, $alpha: 0.1);
      border-bottom: 1px solid gray;
    }
  }
}

::v-deep .first-tabs .el-tabs__item {
  // background-color: skyblue;
  font-size: 16px;
  font-weight: 100;
  color: #333333;
  text-align: center;
  width: 80px;
}

::v-deep .first-tabs .el-tabs__item.is-active {
  //border-bottom: 3px solid black;
  color: #333333;
  font-weight: bold;
}

::v-deep .first-tabs .el-tabs__active-bar {
  background: #333333;
}

/* 鼠标选中时样式 */
::v-deep .first-tabs .el-tabs__item.is-active {
  color: #333333;
  opacity: 1;
}

/* 鼠标悬浮时样式 */
::v-deep .first-tabs .el-tabs__item:hover {
  color: #333333;
  cursor: pointer;
  opacity: 1;
}

::v-deep .first-tabs .custom-table .el-table__header-wrapper {
  display: none;
}

::v-deep .second-tabs .el-tabs__header {
  background-color: transparent;
  margin-top: -30px;
  border-bottom: none;
  display: flex;
  justify-content: flex-end;
}

::v-deep .second-tabs .el-tabs__item {
  border: 1px solid #ccc;
  font-size: 12px;
  height: 25px;
  line-height: 25px;
  width: 65px;
  //background-color: pink;
}

::v-deep .second-tabs .el-tabs__item:hover {
  color: inherit;
}

::v-deep .second-tabs .el-tabs__item.is-active {
  //border-color: green;
  background-color: transparent;
  color: #22d1a1;
  border: 2px solid #22d1a1;
}

::v-deep .second-tabs .el-tabs__item.is-active span {
  color: green;
}
</style>
